import * as echarts from 'echarts'
import theme from '../../resources/config/echarts_theme/theme.json'

Object.keys(theme).forEach(item => {
  echarts.registerTheme(item, theme[item])
})

function index(chart) {
    // 注意这里，是以X轴显示内容过长为例，如果是y轴的话，需要把params.componentType == 'xAxis'改为yAxis
    // 判断是否创建过div框,如果创建过就不再创建了
    // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
    var elementDiv = document.getElementById('extension')
    if (!elementDiv) {
      var div = document.createElement('div')
      div.setAttribute('id', 'extension')
      div.style.display = 'block'
      document.querySelector('html').appendChild(div)
    }
    chart.on('mouseover', function (params) {
      if (params.componentType == 'xAxis') {
        var elementDiv = document.querySelector('#extension')
        //设置悬浮文本的位置以及样式
        var elementStyle =
          'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
        elementDiv.style.cssText = elementStyle
        elementDiv.innerHTML = params.value
        document.querySelector('html').onmousemove = function (event) {
          var elementDiv = document.querySelector('#extension')
          var xx = event.pageX - 10
          var yy = event.pageY + 15
          // console.log('22', xx)
          elementDiv.style.top = yy + 'px'
          elementDiv.style.left = xx + 'px'
        }
      }
    })
    chart.on('mouseout', function (params) {
      //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
      if (params.componentType == 'xAxis') {
        var elementDiv = document.querySelector('#extension')

        elementDiv.style.cssText = 'display:none'
      }
    })
}

export default function(data, options, obj) {
  let ptr = -1
  const refs = Object.values(obj.$refs.chart)
  obj.charts.forEach(item => {
    item.dispose()
  })
  obj.charts = []
  data.forEach(item => {
    ptr++
    if (item.code === 1) {
      const myChart = echarts.init(refs[ptr], obj.theme)
      obj.charts.push(myChart)
      if (item.data.length === 0) {
        myChart.showLoading({
          text: '暂无数据',
          showSpinner: false,    // 隐藏加载中的转圈动图
          textColor: '#9d9d9d',
          maskColor: 'rgba(255, 255, 255, 0.8)',
          fontSize: '25px',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei'
        });
      } else {
        myChart.hideLoading()
      }
      const data = [['item', 'value']]
      item.data.forEach(item => {
        data.push([item[options[ptr].xp], [item[options[ptr].yp]]])
      })
      const chatOptions = {
        title: {
          text: options[ptr].title
        },
        dataset: {
          source: data
        },
        //悬浮显示数据并换行
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function(params) {
            debugger
            return `<div style="display:block;max-width: 200px;word-break: break-all;word-wrap: break-word;white-space:pre-wrap">${params.data[0]}</div>`
          }
        },
        axisLabel: {
          interval: 60,
          rotete:40,
          formatter: function (value) {
            var ret = "" //拼接加\n返回的类目项
            var maxLength = 5 //每项显示文字个数
            var valLength = value.length //X轴类目项的文字个数
            if(valLength >4) {
              return `${value.slice(0,4)}...`;
            }else{ 
              return value
            }
          }
        },
        
        xAxis: {
          type: 'category',
          triggerEvent: true,
          axisLabel:{
            // 设置字体的倾斜角度
            interval: 0,
            rotate: 35
          }
        },
        yAxis: {
          type: 'value'
        },
        series: []
      }
      if (options[ptr].type === 'pie') {
        chatOptions.xAxis.show = false
        chatOptions.yAxis.show = false
        chatOptions.series.push({
          radius: '68%',
             // 饼图位置参数
          center: ["50%", "55%"],
          type: options[ptr].type,
          label: {
            normal: {
              show: true,
              position: 'outside',
              formatter: '{b}',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
              textStyle : {                   
                align : 'center',
                baseline : 'middle',
                fontFamily : '微软雅黑',
                fontSize : 13,
                fontWeight : 'bolder'
              }
            }
          }
        },
        {
          type: options[ptr].type,
          tooltip: {
            trigger: 'item',
            formatter: '{c} ({d}%)'
          },
          center: ["50%", "55%"], 
          label: {
            normal: {
              show: true,
              position: 'inside',
              formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
              textStyle : {                   
                align : 'center',
                baseline : 'middle',
                fontFamily : '微软雅黑',
                fontSize : 11,
                fontWeight : 'bolder'
              }
            }
          }
        })
      } else {
        chatOptions.series.push({
          type: options[ptr].type
        })
      }
      myChart.setOption(chatOptions)
      index(myChart);
    }
  })
}